<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<title>前后端调用</title>
		<script src="../js/axios.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			
		</div>
		<script>
		/**
		 * 查询id=1的用户
		 * url:http://localhost:8090/axios/getUserById
		 * 方式1:动态拼接参数的写法
		 */
		let id =1
		let url1 = "http://localhost:8090/axios/getUserById?id="+id
		axios.get(url1).then(promise => {
			console.log(promise.data)
		})
		
		/**
		 * GET方式2:利用resultful查询数据
		 * 需求:sex为女的用户,age大于18
		 * 模板字符串: 
		 * 			语法: 一对反引号  ``
		 * 			取值: ${key} 形式取值
		 * 			优势: 保留代码格式
		 * 
		 */
		let sex2="女"
		let age2=18
		let url2 =`http://localhost:8090/axios/user/${sex2}/${age2}`
		axios.get(url2).then(
			Promise =>{
				console.log(Promise.data)
			}
		)
		
		/**
		 * GET方式3:利用对象实现参数的传递
		 * 需求3:查询 name=王昭君  sex = 女  age = 19  
		 * 参数语法:
		 * 		数据结构:{params : {}}
		 * 		关键字(固定写法):params
		 * 		value: 用户需要传递的值
		 */
		let user={
			name :"王昭君",
			sex : "女",
			age : 19
		}
		let url3 = "http://localhost:8090/axios/getUser"
		axios.get(url3,{params : user}).then(
				promise =>{
					console.log(promise.data)
				}
		)
		</script>
	</body>
</html>
